<!DOCTYPE html>
<html ng-app='myApp'>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome/css/font-awesome.min.css" />
		<script src="js/angular1.5.8.min.js"></script>
		<script src="js/angular-ui-router.min.js"></script>
		<script src="js/rem.js"></script>
		<script src="js/jquery.3.1.1.js"></script>
		<style type="text/css">
			.abs {
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 2.4rem;
				overflow: scroll;
			}
			
			.index-footer {
				width: 18rem;
				height: 2.4rem;
				position: fixed;
				bottom: 0;
				background: #fff;
			}
			
			.index-footer ul {
				width: 100%;
				display: flex;
				justify-content: space-around;
			}
			
			.index-footer li {
				width: 30%;
				text-align: center;
				padding-top: 0.5rem;
				color: #9f9f9f;
			}
			
			.index-footer li i {
				font-size: 0.9rem;
			}
			
			.index-footer .active {
				color: #f24046;
			}
			
			.index-footer li p {
				font-size: 0.48rem;
			}
			
			.add {
				color: #f24046;
			}
		</style>
	</head>

	<body>

		<div class="abs">
			<ui-view></ui-view>
		</div>
		<footer class="index-footer">
			<ul>
				<li ui-sref="home" ui-sref-active="active">
					<i class="fa fa-fw fa-home"></i>
					<p>首页</p>
				</li>
				<li ui-sref="fen" ui-sref-active="active">
					<i class="fa fa-fw fa-th-large"></i>
					<p>分类</p>
				</li>
				<li ui-sref="my" ui-sref-active="active">
					<i class="fa fa-fw fa-user"></i>
					<p>我的</p>
				</li>
			</ul>
		</footer>
	</body>
	<script>
		var app = angular.module('myApp', ["ui.router"])

		app.config(function($stateProvider, $urlRouterProvider) {
			$urlRouterProvider.when("", "/home")
			$stateProvider.state("home", {
					url: "/home",
					templateUrl: "html/home.html",
					controller: function($state) {
						$state.go('home.child1')
					}
				})
				.state("shop", {
					url: "/shop/:id",
					templateUrl: "html/shop.html",
					controller: "ctrl2"
				})
				.state("shop.tu", {
					url: "/tu",
					templateUrl: "html/page/tu.html",
					controller: "ctrl2",
					
				})
				.state("shop.ping", {
					url: "/ping",
					templateUrl: "html/page/ping.html",
					controller: "ctrl2"
				})
				.state("fen", {
					url: "/fen",
					templateUrl: "html/fenlei.html",
					controller: 'ctrl'
				})
				.state("my", {
					url: "/my",
					templateUrl: "html/wode.html"
				})
				.state("my.shou", {
					url: "/myShou",
					templateUrl: "html/page/myShou.html",
					controller: 'ctrl'

				})
				.state("my.gun", {
					url: "/myGun",
					templateUrl: "html/page/myGun.html",
					controller: 'ctrl',

				})
				.state("home.child1", {
					url: "/homeChild1",
					templateUrl: "html/page/homeChild1.html",
					controller: 'ctrl'

				})
				.state("home.child2", {
					url: "/homeChild2",
					templateUrl: "html/page/homeChild2.html",
					controller: 'ctrl'
				})
				.state("sitings", {
					url: "/sitings",
					templateUrl: "html/sitings.html",
					controller: 'ctrl'
				})
		})

		app.controller('ctrl', function($scope, $http, $state) {
			$scope.span2 = 28
			$http.get('data.json').then(function(res) {
				$scope.obj = res.data
			})
			$scope.show = function(index) {
				$(".list>li").eq(index).find('section').stop().slideToggle()
				$(".list>li").eq(index).siblings().find("section").stop().slideUp()
			}
			$scope.showa = false
			$scope.alert = function() {
				$scope.showa = true
			}
			$scope.cancel = function() {
				$scope.showa = false
			}
			var i = 0
			$scope.add = function(index) {
				$(".mian li").eq(index).find(".span").toggleClass("add")
			}
		})

		app.controller('ctrl2', function($scope, $stateParams, $http) {
			$scope.id = $stateParams.id
			$http.get("data.json").then(function(res) {
				$scope.obj = res.data.home[$scope.id].datalis

			})
		})
	</script>

</html>